<template>
	<view>

		<!-- 热榜商品 -->
		<view class="hot-goods flex justify-start align-center">
			<view class="goods-pic flex align-center justify-center">
				<image class="pic" mode="aspectFill" src="/static/test/rb.jpeg"></image>
			</view>
			<view class="goods-text">
				<view class="text1 over-text2">
					这个是拼团商品的标题，需要测试一下长度之类的东西还有自提大小之类的
				</view>
				<view class="text2 flex align-center justify-between">
					<text class="item1">
						规格:guige1
					</text>
					<text class="item2">

					</text>
				</view>
				<view class="text2 flex align-center justify-between">
					<text class="item1">
						￥99.00
					</text>
					<text class="item2">
						x8
					</text>
				</view>
			</view>
		</view>

		<!-- 门店自提==快递配送 -->
		<!-- 选择栏 -->
		<view class="choose-tab flex relative" :style="[{top:0 + 'px'}]">
			<view :class="['tab-item flex-sub',checked == index ? 'active':'']" v-for="(item,index) in tabbar"
				:key="index" @click="chooseTab(index)">
				{{item.name}}
			</view>
		</view>
		
		<!-- 门店自提 -->
		<view class="store" v-if="checked == 0">
			
			<view class="s-address flex justify-start align-center">
				<image class="img1" src="/static/store/dizhi.png"></image>
				<view class="a-item">
					<view class="text1">
						<text>麒林便利店</text>
						<text>0755-36210058</text>
					</view>
					<view class="text2">
						深圳市宝安区西乡汇一城商铺
					</view>
					
				</view>
				<image class="img2" src="/static/store/jiantouyou.png"></image>
			</view>
			
			<!-- 姓名手机 -->
			<view class="form">
				
				<view class="f-item">
					<view class="item flex">
						<view class="text1">
							姓名:
						</view>
						<view class="text2">
							<input class="input" type="text" placeholder="请输入姓名">
						</view>
					</view>
					<view class="item flex">
						<view class="text1">
							手机:
						</view>
						<view class="text2">
							<input class="input" type="text" placeholder="请输入手机">
						</view>
					</view>
				</view>
				
			</view>
			
			<!-- 优惠券 -->
			<view class="title-coupon flex align-center justify-between">
				<view class="item1">
					优惠券
				</view>
				<view class="item2 flex justify-start align-center">
					<text class="text">
						不使用优惠券
					</text>
					<image class="img w14 h24" src="/static/store/jiantouyou.png"></image>
				</view>
			</view>
			
			<!-- 微信支付，余额支付 -->
			<view class="jumpNav bg-white">
				<view class="nav-item flex align-center justify-between">
					<view class="item-name flex justify-start align-center">
						<image class="w36 h36 mr-16" src="/static/homePage/bangdan-check.png"></image>
						<text>
							余额支付 ￥888.00
						</text>
					</view>
					<view class="">
						<radio  :checked="true" />
					</view>
				</view>
				<view class="nav-item flex align-center justify-between">
					<view class="item-name flex justify-start align-center">
						<image class="w36 h36 mr-16" src="/static/homePage/bangdan-check.png"></image>
						<text>
							微信支付
						</text>
					</view>
					<view class="">
						<radio  :checked="false" />
					</view>
				</view>
			</view>
			
			<!-- 留言备注 -->
			<view class="remark">
				<textarea class="area" value="" placeholder="订单留言" />
			</view>
			
		</view>
		
		<view style="width:750rpx;height:300rpx;"></view>

	
	
	<!-- 底部支付 -->
	<view class="cu-bar tabbar bg-white shadow foot">
		<view class="pay-btn flex justify-start align-center">
			<view class="item1">
				应付款金额：￥75.00（免运费）
			</view>
			<view class="item2">
				立即支付
			</view>
		</view>
	</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: 0, //选中下标
				tabbar: [{
						id: 1,
						name: '门店自提'
					},
					{
						id: 2,
						name: '快递配送'
					}
				]

			}
		},
		onLoad() {

		},
		methods: {
			chooseTab(index) {
				this.checked = index;
				console.log(this.checked, '===checked')
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}
	
	// 底部支付
	.pay-btn{
		width:750rpx;
		height:100rpx;
		.item1{
			flex:3;
			height: 100rpx;
			line-height: 100rpx;
			padding:0 32rpx;
			font-weight: bold;
		}
		.item2{
			flex:1;
			height: 100rpx;
			background: #d4237a;
			text-align: center;
			line-height: 100rpx;
			color:white;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	// 留言备注
	.remark{
		width:750rpx;
		height:260rpx;
		padding: 32rpx;
		background-color: white;
		.area{
			padding:20rpx;
			width:100%;
			height:100%;
			line-height: 56rpx;
			border:1rpx solid #eee;
			border-radius: 16rpx;
		}
	}
	// 微信支付，余额支付
	.jumpNav {
		width: 750rpx;
		padding: 0 32rpx;
		margin-top: 16rpx;
		.nav-item {
			width: 686rpx;
			height: 96rpx;
			border-bottom: 2rpx solid #EEEEEE;
			.item-name {
				font-size: 30rpx;
				line-height: 96rpx;
				color: #666666;
			}
			.item-img {
				width: 18rpx;
				height: 29rpx;
			}
		}
		.nav-item:last-child{
			border:none;
		}
	}
	
	// 我的订单
	.title-coupon{
		width:750rpx;
		height:88rpx;
		padding:0 32rpx;
		margin-top: 16rpx;
		background-color: white;
		.item2{
			font-size: 24rpx;
			color: #bfc8ce;
			.text{
				margin-right: 10rpx;
			}
			
		}
	}
	
	// 姓名手机
	.form{
		width:750rpx;
		padding:32rpx;
		background-color: white;
		.f-item{
			width:686rpx;
			height:200rpx;
			border-radius: 16rpx;
			border:1rpx dashed  #eee;
			.item{
				width:100%;
				height:100rpx;
				// border-bottom: 1rpx solid #eee;
				.text1{
					width:200rpx;
					heihgt:100rpx;
					line-height: 100rpx;
					text-align: center;
				}
				.text2{
					flex:1;
					height:100rpx;
					.input{
						width:100%;
						height:100rpx;
						line-height: 100rpx;
					}
				}
			}
		}
		
	}
	
	// 门店自提
	.store{
		width:750rpx;
		.s-address{
			width:750rpx;
			height:100rpx;
			padding:0 32rpx;
			background-color: white;
			.img1{
				width:38rpx;
				height:38rpx;
			}
			.a-item{
				flex:1;
				padding:0 20rpx;
				text{
					margin-right: 16rpx;
				}
				.text1{
					
				}
				.text2{
					font-size: 26rpx;
					color:#999999;
				}
			}
			.img2{
				width: 28rpx;
				height:32rpx;
			}
		}
	}

	.hot-goods {
		width: 750rpx;
		padding: 0 32rpx;
		margin-bottom: 16rpx;
		background-color: white;

		.goods-pic {
			width: 220rpx;
			height: 220rpx;

			.pic {
				width: 220rpx;
				height: 220rpx;
				border-radius: 16rpx;
			}
		}

		.goods-text {
			width: 466rpx;
			height: 260rpx;
			padding-top: 20rpx;
			padding-left: 24rpx;

			.text1 {
				width: 100%;
				height: 100rpx;
				line-height: 50rpx;
				font-size: 30rpx;
			}

			.text2 {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;

				// padding:0 20rpx;
				text {
					display: inline-block;
					flex: 1;
				}

				.item1 {}

				.item2 {
					text-align: right;
					font-size: 36rpx;
					color: #fc2b25;
				}
			}

			.text3 {
				.tab-text {
					width: 80%;
					height: 60rpx;
					border: 1rpx solid #ddd;
					border-radius: 16rpx;

					.item1 {
						flex: 1;
						text-align: center;
						font-size: 24rpx;
						color: gray;
					}

					.item2 {
						width: 160rpx;
						height: 60rpx;
						background-color: pink;
						color: white;
						border-radius: 16rpx;

						.img {
							margin-left: 12rpx;
						}
					}
				}

				.icon {
					width: 60rpx;
					height: 60rpx;
					margin-left: 16rpx;
				}




			}
		}
	}


	.choose-tab {
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		border-bottom: 2rpx solid #eee;
		z-index: 9999;
		line-height: 116rpx;
		text-align: center;
		color: #999999;

		.tab-item {
			position: relative;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #999999;
		}

		.active {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #DC2D20;
		}
	}
</style>
